<!--
 * @Descripttion: 新增销售订单
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:29:17
 -->
<template>
  <div class="bill_container">
    <el-main>
      <el-form
        ref="billForm"
        :model="dataObj"
        :rules="ruleValidator"
        label-position="right"
        label-width="90px"
      >
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="转出账户: " prop="accountOut">
                <SelectAccountCascader
                  v-model="dataObj.accountOut"
                  class="wfull"
                  @change="onAccountOutChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转出时间: " prop="transTimeOut">
                <el-date-picker
                  v-model="dataObj.transTimeOut"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="wfull"
                  type="datetime"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="转入账户: " prop="accountIn">
                <SelectAccountCascader
                  v-model="dataObj.accountIn"
                  class="wfull"
                  @change="onAccountInChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转入时间: " prop="transTimeIn">
                <el-date-picker v-model="dataObj.transTimeIn" value-format="yyyy-MM-dd HH:mm:ss" class="w150" type="datetime" />
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <h3>费用信息</h3>
          </div>
          <el-divider />
          <el-row :gutter="20">
            <el-form-item label="金额: " prop="amount">
              <el-col :span="12">
                <el-input v-model="dataObj.amount" size="mini" />
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-form-item label="手续费: ">
              <el-col :span="12">
                <el-input v-model="dataObj.procedureAmount" size="mini" />
              </el-col>
              <el-col :span="12">
                <el-radio-group v-model="dataObj.procedureUser">
                  <el-radio :label="0">转出账户支付</el-radio>
                  <el-radio :label="1">转入账户支付</el-radio>
                </el-radio-group>
              </el-col>
            </el-form-item>
          </el-row>
          <el-form-item label="经手人:" prop="handUserId">
            <SelectEmployee
              v-model="dataObj.handUserId"
              :post-method="optionsCurrent"
              :is-set-default="true"
            />
          </el-form-item>
          <el-form-item label="备注: ">
            <el-input v-model="dataObj.remarks" type="textarea" size="mini" />
          </el-form-item>
        </div>
      </el-form>
    </el-main>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import clonedeep from 'clonedeep'
import SelectAccountCascader from '@/views/components/SelectAccountCascader'
import SelectEmployee from '@/views/components/SelectEmployee'
import { optionsCurrent } from '@/api/bsd/employee.js'
import { add } from './mixins'

export default {
  name: 'AccountTransList',
  components: { SelectEmployee, SelectAccountCascader },
  filters: {
  },
  mixins: [oftenuse, add],
  props: {
    data: {
      type: Object,
      default: () => { return null }
    }
  },
  data() {
    return {
      optionsCurrent: optionsCurrent,
      optionsData: {
        direction: [{ value: '0', label: '支出' }, { value: '1', label: '收入' }]
      },
      ruleValidator: {
        accountIn: [
          { required: true, message: '请选择转入账户！', trigger: 'blur' }
        ],
        accountOut: [
          { required: true, message: '请选择转出账户！', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            const accountin = this.dataObj.accountIn
            const accountout = value
            if (accountout === accountin) return callback(new Error('转出账户不能跟转入账户相同！'))
            callback()
          } }
        ],
        transTimeIn: [
          { required: true, message: '请填写转入时间！', trigger: 'blur' }
        ],
        transTimeOut: [
          { required: true, message: '请填写转出时间！', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请填写转账金额！', trigger: 'blur' }
        ],
        handUserId: [
          { required: true, message: '请选择经手人！', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // api
    initData() {
      if (this.data) {
        this.initUpdateData()
      } else {
        this.initSaveData()
      }
    },
    handleVali() {
      const v1 = this.handleValid('billForm')
      return Promise.all([v1])
    },
    // on
    onTransInChange(date) {
      this.$set(this.dataObj, 'transTimeIn', date)
    },
    onTransOutChange(date) {
      this.$set(this.dataObj, 'transTimeOut', date)
    },
    onAccountOutChange(data) {
      const val = data[1]
      this.$set(this.dataObj, 'accountOut', val)
    },
    onAccountInChange(data) {
      const val = data[1]
      this.$set(this.dataObj, 'accountIn', val)
    },
    // api
    getData() {
      return clonedeep(this.dataObj)
    }
  }
}
</script>
